<template>
<q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <!-- header -->
    <q-toolbar color="primary">
      <q-toolbar-title></q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle" class="text-right">
          <div><b>{{list.length}}</b>人</div>
          <div>当前筛选</div>
        </span>
      </q-toolbar-title>
    </q-toolbar>

    <q-list class="search-bar q-pb-md" no-border>
        <q-item>
            <q-radio keep-color v-model="category" val="all"   label="全部类型"   color="primary" />
            <q-radio keep-color v-model="category" val="movie" label="电影"     color="primary" />
            <q-radio keep-color v-model="category" val="tv"     label="连续剧"   color="primary" />
            <q-radio keep-color v-model="category" val="zy_tv" label="综艺"     color="primary" />
        </q-item>
    </q-list>
    <q-list v-scroll="scrolled" separator :no-border="$q.platform.is.mobile" :style="$q.platform.is.desktop?'padding:8px;':''">
        <q-item v-if="!slicedList.length">
            <q-item-main>没有符合条件的作者</q-item-main>
        </q-item>
        <q-collapsible v-for="item in slicedList" :key="'author'+item.userId">
            <template slot="header">
            <q-item-main>
              <q-item-tile label>
                  <span class="q-mr-xs">
                  <q-chip dense square color="teal" v-if="(item.cats & 1) > 0">影</q-chip>
                  <q-chip dense square color="orange" v-if="(item.cats & 2) > 0">剧</q-chip>
                  <q-chip dense square color="blue" v-if="(item.cats & 4) > 0">综</q-chip>
                  <q-chip dense square color="green" v-if="(item.cats & 8) > 0">艺</q-chip>
                  </span>
                  <a :href="'https://www.douban.com/people/'+item.userId+'/'" target="_blank">{{item.userName}}</a>                  
                  <small>（{{item.district == '外' ? '海外 - ' : ''}}{{item.city}}）</small>
              </q-item-tile>
              <q-item-tile sublabel>
                  <q-rating v-if="item.star>0" v-model="item.star" readonly :max="parseInt(item.star)" color="primary" /> 
                  <small>（<b>{{item.followerCount}}</b>粉）</small>                 
              </q-item-tile>
            </q-item-main>
            <q-item-side right v-if="item.status != 0">
               <q-chip  v-if="item.status == -1" dense square color="black">已拉黑</q-chip>
               <q-chip  v-if="item.status == 1" dense square color="secondary">等回应</q-chip>
               <q-chip  v-if="item.status == 2" dense square color="blue">待联系</q-chip>
            </q-item-side>
            <!-- action list -->
            <q-item-side right>
              <q-btn-dropdown dense outline label="操作" @click="stopClick($event)" >
                <!-- 下拉内容 -->
                <q-list separator class="q-pa-none" style="min-width:120px;">
                    <q-item class="q-pa-none" v-if="isAuthor && item.status==2">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="作者已联系" @click="saveAuthor(item, 1)" />
                    </q-item>
                    <q-item class="q-pa-none" v-if="isAuthor && item.status==1">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="新增作者" @click="saveAuthor(item, 0)" />
                    </q-item>
                    <q-item class="q-pa-none" v-if="isAuthor && item.status != -1">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay
                            label="拉黑作者"  @click="saveAuthor(item, -1)"   />
                    </q-item>
                    <q-item class="q-pa-none" v-if="item.status!=-1">
                        <q-btn class="full-width text-primary" dense flat v-close-overlay>
                            <a class="text-primary" :href="'https://www.douban.com/doumail/write?to='+item.userId" target="_blank">豆油联系</a> 
                        </q-btn>
                    </q-item>
                </q-list>
              </q-btn-dropdown>
            </q-item-side>
          </template>
           <div class="row gutter-sm">
              <q-list class="col-xs-12 col-md-6" no-border separator>
                <q-item>
                    <q-item-main label="豆瓣ID" />
                    <q-item-side right>{{item.userId}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="作者昵称" />
                    <q-item-side right>{{item.userName}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="粉丝数量" />
                    <q-item-side right>{{item.followerCount}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="所在城市" />
                    <q-item-side right>{{item.district == '外' ? '海外 - ' : ''}}{{item.city}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="分类" />
                    <q-chip  square color="teal" v-if="(item.cats & 1) > 0">电影</q-chip>
                    <q-chip  square color="orange" v-if="(item.cats & 2) > 0">连续剧</q-chip>
                    <q-chip  square color="blue" v-if="(item.cats & 4) > 0">综艺</q-chip>
                    <q-chip  square color="green" v-if="(item.cats & 8) > 0">艺人</q-chip>
                </q-item>
                <q-item>
                    <q-item-main label="评级" />
                    <q-item-side right>
                        <q-rating v-if="item.star>0" v-model="item.star" readonly :max="parseInt(item.star)" color="primary" />                         
                    </q-item-side>
                </q-item>
              </q-list>
              <q-list class="col-xs-12 col-md-6" no-border separator>
                  <q-item>
                    <q-item-main label="类型" />
                    <q-item-side right>{{item.pref}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="擅长哪国" />
                    <q-item-side right>{{item.expert}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="风格" />
                    <q-item-side right>{{item.style}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="是否挑片" />
                    <q-item-side right>{{item.mind}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="文章质量" />
                    <q-item-side right>{{item.quality}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="出稿速度" />
                    <q-item-side right>{{item.speed}}</q-item-side>
                </q-item>
              </q-list>
              <q-list class="col-xs-12" no-border separator>
                <q-item>
                    <q-item-main label="特殊备注" />
                    <q-item-side right>{{item.note}}</q-item-side>
                </q-item>
                <q-item>
                    <q-item-main label="对接人" />
                    <q-item-side right>{{item.manager}}</q-item-side>
                </q-item>
                <q-item>
                     约稿记录 <br/>
                     {{item.articles}}
                </q-item>
                <q-item>
                     近期影评影片 <br/>
                     {{item.movies}}
                </q-item>
              </q-list>
          </div>
        </q-collapsible>
    </q-list>
</q-page>
</template>

<style>
div.author-modal span.q-option-label, div.search-bar span.q-option-label {
    margin-left: 0px !important;
    margin-right: 10px;
}

div.search-bar {
    background-color: #fff;
}

div.search-bar .q-collapsible-sub-item {
    padding: 0;
}
/*
div.search-bar div.q-item {
    padding: 1px 2px;
}
*/
 
</style>

<script>

function newAuthor() {
    return {
        userId: '',
        userName: '',
        followerCount: 0,
        district: '内',
        city: '',
        cats: 0,
        star: '0',
        pref: '',
        expert: '',
        style: '',
        mind: '',
        quality: '',
        speed: '',
        note: '',
        manager: '',
        articles: '',
        status: '0',
    }
}

export default {
  name: 'PageReviewAuthor',
  data () {
    return {
        isAuthor: true,
        author: newAuthor(),
        params: {
            key:'',
            min:'',
            max:'',
            cats:[],
            star:[],
            mind:[],
            quality:[],
            speed:[],
            cities:[],
            status:1
        },
        currentIndex: 15,
        modal: false,
        downloading: false,
        uploading: false,
        loading: false,
        list: [],
        category: 'all',
        categories: {
            'movie': 1,
            'tv': 2,
            'zy_tv': 4,
        }
    }
  },
  created() {
    var me = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key == 13) {
        me.query(e);
      }
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '备选作者';
    this.query();

    if(this.$route.query.editor) {
      this.modal = true;
      var data = this.$route.query.editor.split('-_-');
      this.author.userId = data[0];
      this.author.userName = data[1];
      this.author.followerCount = data[2];
      this.author.status = data[3];
    }
  },
  methods: {
      scrolled: function() {
          this.currentIndex += 5;
      },
      clickQuery: function(e) {
          e.stopPropagation();
      },
      stopClick: function(e) {
          e.stopPropagation();
      },
      query: function(e) {  
          if(e) e.stopPropagation();               
          let me = this;
          me.loading = true;
          me.$api.author.queryAuthor(me.params, res=>{
              me.currentIndex = 15;
              me.list = res.data.model;
              me.loading = false;
              me.$refs.collapsible.hide();
              if(me.list.length == 0) {
                me.$q.notify({ message: '没有符合条件的作者', type: 'warning' });
              }
          }, error=>{
              me.loading = false;
          });
      },
      deleteAuthor: function(item, e) {
          let me = this;
          item.status = "-2";
            var index = this.list.indexOf(item);
            if (index > -1) {
                this.list.splice(index, 1);
            }
            e.stopPropagation();
            me.$api.author.saveAuthor(item, ret => {}, error =>{});
      },
      editAuthor: function(item, e) {
          this.author = item;
          this.author.star = this.author.star + '';
          this.modal = true;
          e.stopPropagation();
      },
      downloadAuthor: function() {
          //console.log("download");
          let me = this;
          me.downloading = true;
          me.$api.author.downloadAuthor(me.params, function(){
              me.downloading = false;
          });
      },
      uploadAuthor: function(e) {
        let me = this;
        let inputNode = e.target.parentElement.getElementsByTagName("input")[0];
        inputNode.onchange = function(){
            let file = inputNode.files[0];
            me.uploading = true;
            me.$api.author.importAuthor(file, res=>{
                me.query();
                me.uploading = false;
            }, error =>{
                me.uploading = false;
            });
        };
        inputNode.click();
      },
    save: function() {
        let me = this;
        me.loading = true;
        me.$api.author.saveAuthor(me.author, ret => {
            me.query();
            me.modal = false;
            me.loading = false;
        }, error =>{
            me.loading = false;
        });
    }, 
      saveAuthor: function(item, status) {
          let me = this;
          item.status = status;
           me.loading = true;
            me.$api.author.saveAuthor(item, ret => {
                me.loading = false;
            }, error =>{
                me.loading = false;
            });
      },  
    addSingleAuthor: function() {
        this.author = newAuthor();
        this.modal = true;
    }
  }, 
  computed: {
      slicedList() {
          if( this.category !== 'all' ){
              console.log(  this.category, this.categories[this.category] )
              let _list = this.list.filter( item => {
                  return item.cats == this.categories[this.category]
              })
              console.log('_list:::', _list )
              return _list
          }
          if(this.list.length < this.currentIndex) {
              return this.list;
          } else {
              return this.list.slice(0, this.currentIndex);
          }
      }
  }
}
</script>

